<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="${ctx}/static/lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/static/css/flash.css">

    <!-- Custom styles for this template -->
    <link href="${ctx}/static/css/starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv.js"></script>
    <script src="lib/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<!-- 导航 菜单 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img alt="约书亚CMS" src="${ctx}/static/image/logo_420-416.png">CMS</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="articles.html">笔记</a></li>
                <li><a href="#contact">话题</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href=""><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
            </ul>
            <form class="navbar-form navbar-right" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for..."  id="input_search">
                      <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                      </span>
                </div>
            </form>


        </div><!--/.navbar-collapse -->
    </div>
</div>

<!-- 内容 -->
<div class="container">
    <!-- 顶部广告-->
    <div class="row row1" id="top-ad">
        <div class="col-lg-12"><img src="${ctx}/static/image/0f000rjGcmX43BSrQ9tTls.png"></div>
    </div>
    <!-- 内容的上半部-->
    <div class="row row2">
        <div class="col-md-3" id="column-left">
            <div class="titleBar bs-callout bs-callout-info">
                <h3>文章分类</h3>
            </div>
            <div class="article-category clearfix">
                <a href="#">HTML/CSS</a>
                <a href="#">Javascript</a>
                <a href="#">Node.js</a>
                <a href="#">jQuery</a>
                <a href="#">HTML/CSS</a>
                <a href="#">Javascript</a>
                <a href="#">Node.js</a>
                <a href="#">jQuery</a>
                <a href="#">HTML/CSS</a>
                <a href="#">Javascript</a>
                <a href="#">Node.js</a>
                <a href="#">jQuery</a>
            </div>
        </div>

        <div class="col-md-9"  id="column-right">
            <!-- 轮播广告图 -->
            <div id="slider">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="${ctx}/static/image/slider/0f000D3Rc9Gg7BY9kUN9Os.jpg" alt="...">
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">
                            <img src="${ctx}/static/image/slider/0f0000niWDTgkpERd7u1Ys.jpg" alt="...">
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">
                            <img src="${ctx}/static/image/slider/0f0000niWDTgkpERd7u1Ys.jpg" alt="...">
                            <div class="carousel-caption">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 最新动态 -->
            <div id="news clearfix">
                <div class="glyphicon glyphicon-volume-down">最新动态</div>
                <div class="myscroll">
                    <ul>
                        <li><a href="#"><a href="#">FlexSlider</a>用制作支付宝<a href="#">2013版幻灯片</a></a></li>
                        <li><a href="#"><a href="#">FlexSlider</a>用制作支付宝<a href="#">2013版幻灯片</a></a></li>
                        <li><a href="#"><a href="#">FlexSlider</a>用制作支付宝<a href="#">2013版幻灯片</a></a></li>
                        <li><a href="#"><a href="#">FlexSlider</a>用制作支付宝<a href="#">2013版幻灯片</a></a></li>
                        <li><a href="#"><a href="#">FlexSlider</a>用制作支付宝<a href="#">2013版幻灯片</a></a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!-- 内容的下半部-->
    <div class="row row3">
        <!-- 分类2-->
        <div class="col-md-3">
            <div class="titleBar bs-callout bs-callout-info">
                <h3>最新文章</h3>
            </div>
            <div class="article-top20 clearfix">
                <ul>
	                <c:forEach items="${newPosts}" var="post" varStatus="status">
	                <li><a href="#"><i class="toprank_blue">${status.count}</i>${post.postTitle}</a></li>
					</c:forEach>
                </ul>
            </div>
        </div>

        <!-- 系统推荐文章列表-->
        <div class="col-md-6 recommend-article">
            <div class="titleBar bs-callout bs-callout-info">
                <h3>推荐文章</h3>
            </div>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object img-circle" src="${ctx}/static/image/heads/default-1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#" class="author-name">小李飞刀</a>
                        <a href="#" class="article-title"> Middle aligned media</a></h4>
                    <div class="article-extend-info alert alert-gray-lighter">
                        <span>浏览:<i>427</i></span>
                        <span>回复：<i>3</i></span>
                        <span>分类：<a href="#" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" data-placement="top" title="点击查看该分类下的所有文章">JavaScript</a></span>
                    </div>
                </div>
                <div class="intro">
                    关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                </div>
            </div>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object img-circle" src="${ctx}/static/image/heads/default-1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#" class="author-name">小李飞刀</a>
                        <a href="#" class="article-title"> Middle aligned media</a></h4>
                    <div class="article-extend-info alert alert-gray-lighter">
                        <span>浏览:<i>427</i></span>
                        <span>回复：<i>3</i></span>
                        <span>分类：<a data-toggle="tooltip" data-placement="left" title="点击查看该分类下的所有文章">JavaScript</a></span>
                    </div>
                </div>
                <div class="intro">
                    关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                </div>
            </div>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object img-circle" src="${ctx}/static/image/heads/default-1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#" class="author-name">小李飞刀</a>
                        <a href="#" class="article-title"> Middle aligned media</a></h4>
                    <div class="article-extend-info alert alert-gray-lighter">
                        <span>浏览:<i>427</i></span>
                        <span>回复：<i>3</i></span>
                        <span>分类：<a data-toggle="tooltip" data-placement="left" title="点击查看该分类下的所有文章">JavaScript</a></span>
                    </div>
                </div>
                <div class="intro">
                    关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                </div>
            </div>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object img-circle" src="${ctx}/static/image/heads/default-1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#" class="author-name">小李飞刀</a>
                        <a href="#" class="article-title"> Middle aligned media</a></h4>
                    <div class="article-extend-info alert alert-gray-lighter">
                        <span>浏览:<i>427</i></span>
                        <span>回复：<i>3</i></span>
                        <span>分类：<a data-toggle="tooltip" data-placement="left" title="点击查看该分类下的所有文章">JavaScript</a></span>
                    </div>
                </div>
                <div class="intro">
                    关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                </div>
            </div>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object img-circle" src="${ctx}/static/image/heads/default-1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#" class="author-name">小李飞刀</a>
                        <a href="#" class="article-title"> Middle aligned media</a></h4>
                    <div class="article-extend-info alert alert-gray-lighter">
                        <span>浏览:<i>427</i></span>
                        <span>回复：<i>3</i></span>
                        <span>分类：<a data-toggle="tooltip" data-placement="left" title="点击查看该分类下的所有文章">JavaScript</a></span>
                    </div>
                </div>
                <div class="intro">
                    关于正则表示的重要性，我想不必多说。如果有一样东西，能让我三天学会其大部分。我会果断尝试的。因为有这种意识，去坚持。时间久了，自然就比同龄人，懂的要多。随便扯扯我对事物的感兴趣程度。比如说可 ...
                </div>
            </div>
        </div>
        <!-- 系统活动-->
        <div class="col-md-3">
            <div class="titleBar bs-callout bs-callout-info">
                <h3>快报</h3>
            </div>
            <div class="article-top20 clearfix">
                <ul>
                    <li><a href="#"><i class="toprank_blue">1</i>我的右键菜单，我做主！</a></li>
                    <li><a><i class="toprank_blue">2</i>web前端35个jQuery小技巧！</a></li>
                    <li><a><i class="toprank_blue">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                </ul>
            </div>

            <div class="titleBar bs-callout bs-callout-info">
                <h3>工具库</h3>
            </div>
            <div class="article-top20 clearfix">
                <ul>
                    <li><a href="#"><i class="toprank_blue">1</i>我的右键菜单，我做主！</a></li>
                    <li><a><i class="toprank_blue">2</i>web前端35个jQuery小技巧！</a></li>
                    <li><a><i class="toprank_blue">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                </ul>
            </div>

            <!--话题-->
            <div class="titleBar bs-callout bs-callout-info">
                <h3>一起参与</h3>
            </div>
            <div class="topic">
                <a href="#">
                    <div class="topic_box">
                        <img src="${ctx}/static/image/214726rszmexx2xsehx2sm.jpg.crop_270x120.jpg"/>
                        <div class="topic_box_center">
                            <h5>#我的极品上司#</h5>
                            <button class="btn btn-primary"><sapn class="glyphicon glyphicon-bullhorn"></sapn> 已有4930人参与</button>
                        </div>
                        <span class="shine"></span>
                    </div>
                </a>
            </div>
            <div class="topic">
                <a href="#">
                    <div class="topic_box">
                        <img src="${ctx}/static/image/230027rm5hlj5i5fvn838j.jpg.crop_270x120.jpg"/>
                        <div class="topic_box_center">
                            <h5>#我的极品上司#</h5>
                            <button class="btn btn-primary"><sapn class="glyphicon glyphicon-bullhorn"></sapn> 已有4930人参与</button>
                        </div>
                        <span class="shine"></span>
                    </div>
                </a>
            </div>
            <div class="topic">
                <a href="#">
                    <div class="topic_box">
                        <img src="${ctx}/static/image/230702e0kx3inbzabk7zka.jpg.crop_270x120.jpg"/>
                        <div class="topic_box_center">
                            <h5>#我的极品上司#</h5>
                            <button class="btn btn-primary"><sapn class="glyphicon glyphicon-bullhorn"></sapn> 已有4930人参与</button>
                        </div>
                        <span class="shine"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>

</div><!-- /.container -->

<!-- 底部 -->
<div id="footer">
    <div class="container-fluid">
        <div class="row">
            <a href="">关于我们</a>
            <a href="">商务合作</a>
            <a href="">合作案例</a>
            <a href="">商务联系</a>
            <a href="">注册协议</a>
            <a href="">免责声明</a>
            <a href="">版权隐私</a>
            <a href="">新浪微博</a>
        </div>
        <div class="row">
            <p class="text-muted">Copyright © JoshuaIt.com All Rights Reserved. 苏ICP备16010632号</p>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="${ctx}/static/lib/jquery-1.12.4.min.js"></script>
<script src="${ctx}/static/lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="${ctx}/static/lib/scroll.js"></script>
<script src="${ctx}/static/js/myJs.js"></script>
</body>
</html>
